<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title>  
    <style>  
        * {  
            margin: 0;  
            padding: 0;  
            box-sizing: border-box;  
        }  
  
        body {  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            min-height: 100vh;  
            overflow: hidden;  
            background: #cdf1e1;  
        }  
  
        .container .box {  
            position: relative;  
            width: 400px;  
            height: 480px;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
        }  
  
        .container .box::before {  
            content: "";  
            position: absolute;  
            top: 0;  
            left: 0;  
            width: 25px;  
            height: 100%;  
            background: linear-gradient(#fff, #fff, #e3e3e3);  
            filter: blur(1px);  
            z-index: 1;  
        }  
  
        .container .box::after {  
            content: "";  
            position: absolute;  
            top: 1;  
            right: -1px;  
            width: 25px;  
            height: 100%;  
            background: #9d9d9d;  
            filter: blur(1px);  
            z-index: 1;  
        }  
  
        .container .box .shadow {  
            position: absolute;  
            width: 100%;  
            height: 100%;  
            background: #eee;  
        }  
  
        .container .box .shadow::before {  
            content: "";  
            position: absolute;  
            top: 0;  
            left: calc(100% + 96px);  
            width: 120%;  
            height: 240%;  
            background: linear-gradient(rgb(0, 0, 0, 0.075), transparent);  
            transform: skewX(45deg);  
            /*定义沿着X轴的2D倾斜转换。*/  
        }  
  
        .container .box .shadow::after {  
            content: "";  
            position: absolute;  
            bottom: -200%;  
            left: calc(100% + 80px);  
            width: 100%;  
            height: 200%;  
            background: linear-gradient(rgb(0, 0, 0, 0.075), transparent);  
            transform: skewX(45deg);  
            /*定义沿着X轴的2D倾斜转换。*/  
        }  
  
        .cover {  
            position: absolute;  
            top: 0;  
            left: -100px;  
            width: 100px;  
            height: 100px;  
            background: #cdf1e1;  
            z-index: 10;  
        }  
  
        .content {  
            position: relative;  
            width: 100%;  
            height: 100%;  
            background: linear-gradient(#dbdae1, #a3aaba);  
            box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.2),  
                15px 15px 15px rgb(0, 0, 0, 0.2),  
                20px 10px 20px rgb(0, 0, 0, 0.2),  
                50px 50px 80px rgb(0, 0, 0, 0.2),  
                inset 3px 3px 2px #fff;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
        }  
  
        .content .form {  
            position: relative;  
            width: 260px;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            flex-direction: column;  
        }  
  
        .logo {  
            width: 70px;  
            height: 70px;  
            background: #444;  
            color: #fff;  
            font-size: 1.75em;  
            margin-bottom: 10px;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            border-radius: 10px;  
        }  
  
        .content .form h2 {  
            font-size: 2em;  
            color: #444;  
            margin-bottom: 20px;  
        }  
  
        .content .form .inputBox {  
            position: relative;  
            width: 100%;  
            margin-top: 30px;  
        }  
  
        .content .form .inputBox input {  
            position: relative;  
            width: 100%;  
            padding: 10px 0 10px 25px;  
            font-size: 1.25em;  
            background: transparent;  
            box-shadow: none;  
            border: none;  
            border-bottom: 3px solid #444;  
            outline: none;  
            color: #444;  
        }  
  
        .content .form .inputBox ion-icon {  
            position: absolute;  
            left: 0;  
            bottom: 15px;  
            font-size: 1.25em;  
            color: #444;  
        }  
  
        .content .form .inputBox span {  
            position: absolute;  
            left: 0;  
            padding: 10px 0 10px 25px;  
            font-size: 1.25em;  
            pointer-events: none;  
            color: #444;  
            transition: 0.5s;  
        }  
  
        .content .form .inputBox input:focus~span,  
        .content .form .inputBox input:valid~span {  
            transform: translateY(-20px);  
            font-size: 0.9em;  
            background: #444;  
            color: #fff;  
            padding: 2px 4px;  
        }  
  
        .content .form .links {  
            width: 100%;  
            margin-top: 15px;  
            display: flex;  
            justify-content: center;  
        }  
  
        .content .form .links a {  
            margin: 0 10px;  
            color: #444;  
            text-decoration: none;  
  
        }  
  
        .content .form .inputBox input[type="submit"] {  
            background: #444;  
            color: #fff;  
            cursor: pointer;  
            padding: 10px;  
        }  
  
        .content .form .inputBox input[type="submit"]:hover {  
            background: #333;  
        }  
    </style>  
</head>  
  
<body>  
    <div class="container">  
        <div class="box">  
            <div class="cover"></div>  
            <div class="shadow"></div>  
            <div class="content">  
                <div class="form">  
                    <h3 class="logo"><ion-icon name="keypad-outline"></ion-icon></h3>  
                    <h2>Sign in</h2>  
                    <div class="inputBox">  
                        <input type="text" required>  
                        <ion-icon name="person-outline"></ion-icon>  
                        <span>Username</span>  
                    </div>  
                    <div class="inputBox">  
                        <input type="password" required>  
                        <ion-icon name="lock-closed-outline"></ion-icon>  
                        <span>Password</span>  
                    </div>  
                    <div class="links">  
                        <a href="#"><ion-icon name="help-circle-outline"></ion-icon>Forget Password</a>  
                        <a href="#"><ion-icon name="person-add-outline"></ion-icon>Sign up</a>  
                    </div>  
                    <div class="inputBox">  
                        <input type="submit" value="login">  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
  
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>  
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>  
</body>  
  
</html> 